
<template>
	<view class="searchbody">
		<view class="mask" @click='close()'></view>
		<view class="search-body">
			<view class="search-line">
				<view class="search">
					<image src="/static/map/search-icon.png" mode=""></image>
					<!-- <input type="text" placeholder="搜索景点名称"> -->
					<view class="search-input"  @click="toSearch">搜索景点名称</view>
				</view>
				<view class="search-btn">等待人数少</view>
				<view class="search-btn">离我最近</view>
			</view>
			<view class="search-list">
				<view class="search-item" v-for="(item,index) in searchData" :key='index' @click="choose(index)">
					<image :src="item.img" mode=""></image>
					<view class="item-text">
						<text class="item-title">{{item.name}}</text>
						<!-- <text class="item-des">{{item.des}}</text> -->
						<view class="wait">
							<text style="color: rgba(102,102,102,1.00);font-size: 22upx;">等待浏览人数：<text style="color: rgba(84,177,255,1.00);font-size: 22upx;">{{item.people}}</text></text>
							<text style="color: rgba(102,102,102,1.00);font-size: 22upx;">预计等待：<text style="color: rgba(84,177,255,1.00);font-size: 22upx;">{{item.minute}}</text></text>
						</view>
					</view>
					<view class="enter" @click="toDetail">立即排队</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				searchData:[
					{
						img:'/static/banner.png',
						name:'半山泉',
						// des:'清新观景台，在清新大道中轴线北端...'
						people:'23人',
						minute:'23分钟'
					},
					{
						img:'/static/banner.png',
						name:'求字神泉',
						// des:'景区稀有动植物，游玩设施'
						people:'23人',
						minute:'23分钟'
					},
					{
						img:'/static/banner.png',
						name:'班丹拉姆观景台',
						// des:'科技新体验，走进未来世界'
						people:'23人',
						minute:'23分钟'
					},
					{
						img:'/static/banner.png',
						name:'及香山',
						people:'23人',
						minute:'23分钟'
						// des:'中国科技馆是我国唯一的国家级综合性...'
					}
				]
			}
		},
		methods: {
			toDetail() {
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.openQueue();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.openQueue();
				//#endif
				
			},
			toSearch(){
				uni.navigateTo({
					url:'/pages/home/scenicSpot/map/shenqiSearch'
				})
			},
			choose(index){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.spotClick();
				this.$parent.spotIndex=index;
				this.$parent.tap()
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.spotClick();
				this.$parent.$parent.spotIndex=index;
				this.$parent.$parent.tap()
				//#endif
			},
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeSpotSearchO();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeSpotSearchO();
				//#endif
				
			}
		},
	}
</script>

<style scoped>
	.searchbody{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
	}
	.mask{
		width: 750upx;
		height: calc(100vh - 250upx);
		
		position: absolute;
		/* top: 140upx; */
	}
	.search-body{
		width: 750upx;
		height: 535upx;
		position: fixed;
		background: #FFFFFF;
		border-radius: 30upx 30upx 0 0;
		bottom: 110upx;
	}
	.search-line{
		display: flex;
		flex-direction: row;/*控制方向 --*/
		justify-content: space-between; /*对齐方式*/
	}
	.search{
		width: 359upx;
		height: 60upx;
		margin-left: 15upx;
		margin-right: 19upx;
		margin-top: 27upx;
		border-radius: 20upx;
		border: #e4e4e4 solid 1px;
	}
	.search image{
		width: 28upx;
		height: 28upx;
		margin-left: 35upx;
		margin-top: 16upx;
		float: left;
	}
	.search-input{
		width: 250upx;
		height: 60upx;
		margin-left: 20upx;
		font-size: 28upx;
		float: left;
		line-height: 60upx;
	}
	.search-btn{
		width: 166upx;
		height: 44upx;
		background: rgba(84,177,255,1);
		/* margin-left: 15upx; */
		border-radius: 50upx;
		color: #FFFFFF;
		font-size: 28upx;
		line-height: 42upx;
		margin-top: 35upx;
		margin-right: 24upx;
		text-align: center;
	}
	.search-list{
		width: 750upx;
		height: 400upx;
		margin-top: 20upx;
		overflow: scroll;
	}
	.search-item{
		width: 750upx;
		height: 75upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
	}
	.search-item image{
		width: 95upx;
		height: 75upx;
		border-radius: 10upx;
		margin-left: 42upx;
		float: left;
	}
	.item-text{
		float: left;
		width: 450upx;
		height: 75upx;
		margin-left: 30upx;
	}
	.item-title{
		width: 450upx;
		display: block;
		font-size: 28upx;
	}
	.item-des{
		width: 450upx;
		display: block;
		font-size: 24upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.wait{
		width: 420upx;
		display: block;
		font-size: 24upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		/* display: flex; */
		flex-direction: row;
		justify-content:flex-start;
	}
	.enter{
		width: 120upx;
		height: 40upx;
		border: #A8D7FF solid 1upx;
		border-radius: 20upx;
		font-size: 24upx;
		text-align: center;
		line-height: 40upx;
		float: right;
		color: #577AFF;
		margin-top: -50upx;
		margin-right: 23upx;
	}
</style>
